<template>
    <div class="three bodybg">
<div class="head">
            <div class="nav_box justify-between">
                <div class="time_left"></div>
                <div class="title_m">大企业税源监控分析应用服务</div>
                <div class="yun_right"></div>
            </div>

            <div class="flex-row">
                <div class="minitit_l flex-row-r">
                    <a href="javascript:;" @click="go('/jsjfgkfxs')" class="minibtn bg01 ved"><span>减税概况</span></a>
                    <a href="javascript:;" @click="go('/fpgks')" class="minibtn bg02 "><span>发票概况</span></a>
                    <a href="javascript:;" @click="go('/ones')" class="minibtn bg02 "><span>税收概况</span></a>
                </div>
                <div class="minitit_r flex-row">
                    <a href="javascript:;" @click="go('/twos')" class="minibtn bg03 "><span>经营概况</span></a>
                    <a href="javascript:;" @click="go('/threes')" class="minibtn bg03 "><span>行业概况</span></a>
                    <a href="javascript:;" @click="go('/fours')" class="minibtn bg04 "><span>区域概况</span></a>
                </div>
            </div>
        </div>
        <div class="bkmail justify-between">
            <div class="bk_le">
                <!-- 收入优惠趋势 -->
                <div class="box3_con11" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>收入优惠趋势</span></div>
                    <div class="conform">
                        <div id="echart1" style=" display: block; height: 380px;"></div>
                    </div>
                </div>
                <!-- 收入分税种优惠趋势 -->
                <div class="box3_con11 zhux" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>收入分税种优惠趋势</span></div>
                    <div class="conform2">
                        <div id="echart2" style=" display: block; height: 380px;"></div>
                    </div>
                </div>

            </div>

            <div class="bk_min" style="padding: 0 20px;">
                <div class="mapbox">
                    <div class="title">

                        <div class="mapse flex-row">
                            <div class="txtinp flex-row">
                                <span class="spansize">所属年度：</span>
                                <el-date-picker popper-class="sift-data" :append-to-body="false" class="inpcon" v-model="form.nd" type="year" value-format="yyyy" :default-value="form.defaultDate">
                                </el-date-picker>
                            </div>
                            <div class="txtinp flex-row">
                                <span class="spansize">企业类型：</span>
                                <el-select class="inpcon2" v-model="form.jtlx" placeholder="请选择" :popper-append-to-body="false">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <a href="javascript:;" class="ashw" id="gotosheng" @click="getData()">查询</a>
                        </div>
                    </div>
                    <div id="map" class="map_shuju" style="height: 840px;" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    </div>
                    <div class="chart">
                        <div class="biaoti">优惠额（万元）</div>
                        <div class="main" id="echart5" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">

                        </div>
                    </div>
                </div>

            </div>

            <div class="bk_le">
                <!-- 集团营业收入经济类型构成 -->
                <div class="box3_con11 rightbg" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title_r"><span>增值税留抵退税情况</span></div>
                    <div class="conform">
                        <div id="echart3" style=" display: block; height: 380px;"></div>
                    </div>
                </div>
                <!-- 集团企业减税降费排名 -->
                <div class="box3_con11 rightbg" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title_r"><span>企业减税降费排名</span></div>
                    <div class="conform">
                        <div class="conform">
                            <div id="echart4" style=" display: block; height: 380px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 地图 -->
        <div id="map-dialog" class="map-dialog">
            <div class="d_main">
                <div class="m_list">
                    <div class="l_item" >

                        <div class="d_mainbgc" style="height: 516px;">
                            <div class="title">{{mapNsrmc}}</div>
                            <table class="shiqutable" v-loading="maploading">
                                <tr v-for="(item,key) in mapXzData" :key="key">
                                    <td><span>{{item.SWJGMC}}:</span>{{item.SE}}万元</td>
                                    
                                </tr>
                              
                            </table>
                        </div>
                        <div class="d_mainbgb"></div>

                    </div>
                   
                </div>
                <a class="m_close" href="javascript:;" onclick="document.getElementById('map-dialog').style.display = 'none'"></a>
            </div>
        </div>
        <!-- 地图end -->

        <!-- tan -->
        <div id="pifacon" class="zx-dialog">
            <div class="d_main">
                <div class="d_mainbgc" style="height: 186px;">
                    <div class="title">批发和零售业收入</div>
                    <table class="shiqutable">
                        <tr>
                            <td><span>批发业:</span>32123.21亿</td>
                        </tr>
                        <tr>
                            <td><span>零售业:</span>31231.98亿</td>
                        </tr>
                    </table>
                </div>
                <div class="d_mainbgb"></div>

                <a class="m_close" href="javascript:;" onclick="document.getElementById('pifacon').style.display = 'none'"></a>
            </div>
        </div>

        <div id="zhizaocon" class="zx-dialog">
            <div class="d_main">
                <div class="d_mainbgc" style="height: 440px;">
                    <div class="title">制造业收入</div>
                    <table class="shiqutable">
                        <tr>
                            <td><span>农副食品加工业:</span>32123.21亿</td>
                        </tr>
                        <tr>
                            <td><span>食品制造业:</span>31231.98亿</td>
                        </tr>
                        <tr>
                            <td><span>酒、饮料和精制茶制造业:</span>31231.97亿</td>
                        </tr>
                        <tr>
                            <td><span>烟草制品业:</span>31231.96亿</td>
                        </tr>
                        <tr>
                            <td><span>纺织业:</span>31231.95亿</td>
                        </tr>
                        <tr>
                            <td><span>纺织服装、服饰业:</span>31231.94亿</td>
                        </tr>
                        <tr>
                            <td><span>皮革、毛皮、羽毛及其制品和制鞋业:</span>31231.93亿</td>
                        </tr>
                        <tr>
                            <td><span>木材加工和木、竹、藤、棕、草制品业:</span>31231.91亿</td>
                        </tr>

                        <tr>
                            <td><span>造纸和纸制品业:</span>31231.89亿</td>
                        </tr>
                    </table>
                </div>
                <div class="d_mainbgb"></div>

                <a class="m_close" href="javascript:;" onclick="document.getElementById('zhizaocon').style.display = 'none'"></a>
            </div>
        </div>
    </div>
</template>

<script>

import { queryJsjfgk, jsjfgkSwjgxz } from '@/api/cxtj/jsjfgkjk'

import * as echarts from "echarts";
let china = require('./json/130000_full.json');
import 'echarts-gl'
import autofit from 'autofit.js'
import $ from 'jquery';
export default {
    data() {
        return {
            loading: false,
            form: {
                nd: '',
                jtlx: '11',
                defaultDate: ''
            },
            options: [
                {
                    value: '11',
                    label: '千户集团'
                }, {
                    value: '2',
                    label: '省局列名'
                }, {
                    value: '3',
                    label: '市局列名'
                }
            ],



            jtpmList: [],
            ldtsYhjeList: [],
            ldtsZzlList: [],
            qssrpmList: [],
            sryhYhjeList: [],
            sryhZzlList: [],
            srfszYhqsList: [],
             mapXzData: [],
            mapNsrmc: '',
            maploading: false

        }
    },
    mounted() {
        autofit.init({
            dh: 1080,
            dw: 1920,
            el: ".bodybg",
            resize: true
        })
        var currentDate = new Date();
        var year = currentDate.getFullYear(); // 获取当前年份
        console.log(year)
        this.form.nd = year + ''
        this.form.defaultDate = year + ''
        this.getData()



    },
    unmounted() {
        autofit.init()
    },
    methods: {
        getData() {
            this.loading = true
            let param = {
                nd: this.form.nd,
                jtlx: this.form.jtlx,
            }
            queryJsjfgk(param).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    // //集团概况
                    this.jtpmList = res.data.jtpmList.sort((a, b) => a.SE - b.SE)
                    this.ldtsYhjeList = res.data.ldtsYhjeList

                    this.ldtsZzlList = res.data.ldtsZzlList


                    console.log()
                    this.qssrpmList = res.data.qssrpmList.sort((a, b) => a.SE - b.SE)
                    this.sryhYhjeList = res.data.sryhYhjeList
                    this.sryhZzlList = res.data.sryhZzlList


                    this.srfszYhqsList = res.data.srfszYhqsList

                    this.init()
                }
            })
        },
        init() {
            this.sryhqs()
            this.srfszyhqs()
            this.zzsldts()
            this.qyjtjsjfpm()
            this.qssr()
            this.mapChart()
        },
        //按行业成员企业分布情况
        sryhqs() {
            let self = this
            let ldtsYhje = ['YJD', 'EJD', 'SJD', 'SIJD']
            let ldtsZzl = ['YJDZZL', 'EJDZZL', 'SJDZZL', 'SIJDZZL']
            let series0Data = []
            let series1Data = []
            for (let i = 0; i < ldtsYhje.length; i++) {
                for (let j in this.sryhYhjeList[0]) {
                    if (ldtsYhje[i] == j) {
                        series0Data[i] = this.sryhYhjeList[0][j]
                    }
                }
            }
            for (let i = 0; i < ldtsZzl.length; i++) {
                console.log(ldtsZzl[i])
                for (let j in this.sryhZzlList[0]) {

                    if (ldtsZzl[i] == j) {
                        console.log(this.sryhZzlList[0][j])
                        series1Data[i] = this.sryhZzlList[0][j]
                    }
                }
            }
            let myChart = echarts.init(document.getElementById('echart1'));
            myChart.setOption(
                {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#fffffff'
                            }
                        },
                        formatter: function (params) {
                            var result = params[0].name + '<br/>';
                            params.forEach(function (item) {
                                if (item.seriesType === 'bar') {
                                    result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                                } else if (item.seriesType === 'line') {
                                    result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                                }
                            });
                            return result;
                        }
                    },
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                    grid: {
                        top: '17%',
                        left: '1%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    legend: {
                        data: ['税收优惠金额', '增长率'],
                        textStyle: {
                            color: '#ffffff' // 文字颜色
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                        axisPointer: {
                            type: 'shadow',
                        },
                        axisLabel: {
                            fontSize: 12 // 设置标签字体大小
                        }

                    }],
                    yAxis: [{
                        type: 'value',
                        name: '亿元',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        nameTextStyle: {
                            align: 'left', // 单位名称的对齐方式
                            padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                        }

                    },
                    {
                        type: 'value',
                        name: '%',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#324065', // 设置背景线的颜色
                            }
                        }
                    }

                    ],
                    series: [{

                        name: '税收优惠金额',
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#1379FC' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#31C9F8' // 渐变结束颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        data: series0Data

                    },


                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#44D7B6' // 渐变起始颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: series1Data
                    }
                    ]
                },
            );



        },
        //按行业集团收入情况
        srfszyhqs() {
            let xAxisData = []
            let series0Data = []
            let series1Data = []
            for (let i = 0; i < this.srfszYhqsList.length; i++) {
                xAxisData.push(this.srfszYhqsList[i].SZ)
                series0Data.push(this.srfszYhqsList[i].SE)
                series1Data.push(this.srfszYhqsList[i].ZZL)
            }

            let myChart = echarts.init(document.getElementById('echart2'));
            myChart.setOption(
                {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#fffffff'
                            }
                        },
                        formatter: function (params) {
                            var result = params[0].name + '<br/>';
                            params.forEach(function (item) {
                                if (item.seriesType === 'bar') {
                                    result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                                } else if (item.seriesType === 'line') {
                                    result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                                }
                            });
                            return result;
                        }
                    },
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                    grid: {
                        top: '17%',
                        left: '1%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    legend: {
                        data: ['税收优惠金额', '增长率'],
                        textStyle: {
                            color: '#ffffff' // 文字颜色
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxisData,
                        axisPointer: {
                            type: 'shadow',
                        },
                        axisLabel: {
                            fontSize: 12 // 设置标签字体大小
                        }

                    }],
                    yAxis: [{
                        type: 'value',
                        name: '亿元',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        nameTextStyle: {
                            align: 'left', // 单位名称的对齐方式
                            padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                        }

                    },
                    {
                        type: 'value',
                        name: '%',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#324065', // 设置背景线的颜色
                            }
                        }
                    }

                    ],
                    series: [{

                        name: '税收优惠金额',
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#1379FC' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#31C9F8' // 渐变结束颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        data: series0Data

                    },


                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#44D7B6' // 渐变起始颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: series1Data
                    }
                    ]
                }
            );



        },
        zzsldts() {
            let self = this
            let ldtsYhje = ['YJD', 'EJD', 'SJD', 'SIJD']
            let ldtsZzl = ['YJDZZL', 'EJDZZL', 'SJDZZL', 'SIJDZZL']
            let series0Data = []
            let series1Data = []
            for (let i = 0; i < ldtsYhje.length; i++) {
                for (let j in this.ldtsYhjeList[0]) {
                    if (ldtsYhje[i] == j) {
                        console.log(this.ldtsYhjeList[0][j])
                        series0Data[i] = this.ldtsYhjeList[0][j]
                    }
                }
            }
            for (let i = 0; i < ldtsZzl.length; i++) {
                console.log(ldtsZzl[i])
                for (let j in this.ldtsZzlList[0]) {

                    if (ldtsZzl[i] == j) {
                        console.log(this.ldtsZzlList[0][j])
                        series1Data[i] = this.ldtsZzlList[0][j]
                    }
                }
            }

            let myChart = echarts.init(document.getElementById('echart3'));
            myChart.setOption(
                {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#fffffff'
                            }
                        },
                        formatter: function (params) {
                            var result = params[0].name + '<br/>';
                            params.forEach(function (item) {
                                if (item.seriesType === 'bar') {
                                    result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                                } else if (item.seriesType === 'line') {
                                    result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                                }
                            });
                            return result;
                        }
                    },
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                    grid: {
                        top: '17%',
                        left: '1%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    legend: {
                        data: ['税收优惠金额', '增长率'],
                        textStyle: {
                            color: '#ffffff' // 文字颜色
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                        axisPointer: {
                            type: 'shadow',
                        },
                        axisLabel: {
                            fontSize: 12 // 设置标签字体大小
                        }

                    }],
                    yAxis: [{
                        type: 'value',
                        name: '亿元',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        nameTextStyle: {
                            align: 'left', // 单位名称的对齐方式
                            padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                        }

                    },
                    {
                        type: 'value',
                        name: '%',

                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#324065', // 设置背景线的颜色
                            }
                        }
                    }

                    ],
                    series: [{

                        name: '税收优惠金额',
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#1379FC' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#31C9F8' // 渐变结束颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        data: series0Data

                    },


                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#44D7B6' // 渐变起始颜色
                                },

                                ],
                            },
                            borderRadius: [10, 10, 0, 0],

                        },
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: series1Data
                    }
                    ]
                }
            );




        },
        qyjtjsjfpm() {

            let yAxisData = []
            let series0Data = []
            for (let i = 0; i < this.jtpmList.length; i++) {
                yAxisData.push(this.jtpmList[i].GROUPNAME.substring(0, 4) + '####' + this.jtpmList[i].GROUPNAME)
                series0Data.push(this.jtpmList[i].SE)
            }
            let myChart = echarts.init(document.getElementById('echart4'));
            myChart.setOption(
                {
                    backgroundColor: '',

                    grid: {
                        top: '5%',
                        left: '19%',
                        bottom: '12%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params, ticket, callback) {
                            var value = params[0].name;
                            var index = value.indexOf('####');

                            var ret = '';
                            if (index <= 0) {
                                ret = value;
                            } else {
                                ret = value.substr(index + 4)
                            }
                            ret += "<br>" + params[0].seriesName + ":" + params[0].value
                            return ret;
                        }
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'value',
                        name: '万元',
                        //interval: 'auto',
                        nameTextStyle: {
                            color: '#fff'
                        },
                        splitLine: {
                            show: true
                        },
                        spiltNumber: 3,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            rotate: 20
                        },

                    }],
                    yAxis: [{
                        type: 'category',
                        data: yAxisData,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            formatter: function (value) {
                                var index = value.indexOf('####');
                                if (index <= 0) {
                                    return value;
                                } else {
                                    return value.substr(0, index)
                                }
                            }
                        },

                    }],
                    series: [{
                        name: '收入（万元）',
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            color: "#1e90ff"
                        },
                        data: series0Data
                    }]
                }
            );




        },

        mapChart() {
            let self= this
            echarts.registerMap('china', china);
            let chart = echarts.init(document.getElementById('map'));
            chart.setOption({
                series: [{
                    type: 'map3D',
                    map: 'china',
                    top: '-18%',    // 顶部的空间大小
                    bottom: '5%', // 底部的空间大小
                    left: '-26%',   // 左侧的空间大小
                    right: '-30%',  // 右侧的空间大小
                    itemStyle: {
                        color: 'rgba(21, 46, 171, 0.5)',
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                        borderColor: "#9AB4FF", // 图形描边的颜色。[ default: #333 ]
                    },
                    label: {
                        // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // formatter: function (params) {
                        //   return params.name ? params.name : " ";
                        // },
                        position: "bottom",
                        textStyle: {
                            // 标签的字体样式
                            color: "#fff", // 地图初始化区域字体颜色
                            fontSize: 12, // 字体大小
                            opacity: 1,
                        },
                    },

                    /*
                    emphasis: {
                      // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                      label: {
                        // label 高亮时的配置
                        show: true,
                        textStyle: {
                          color: "#fff", // 高亮时标签颜色变为 白色
                          fontSize: 15, // 高亮时标签字体 变大
                        },
                      },
                      itemStyle: {
                        // itemStyle 高亮时的配置
                        areaColor: "#66ffff", // 高亮时地图板块颜色改变
                      },
                    },
                    */
                    groundPlane: {
                        // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                        show: false, // 是否显示地面。[ default: false ]
                        color: "#aaa", // 地面颜色。[ default: '#aaa' ]
                    },
                    light: {
                        // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                        main: {
                            // 场景主光源的设置，在 globe 组件中就是太阳光。
                            color: "#3D94CE", // 主光源的颜色。[ default: #fff ]
                            intensity: 2, // 主光源的强度。[ default: 1 ]
                            shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                            shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                            alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                            beta: 80, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                        },
                        ambient: {
                            // 全局的环境光设置。
                            color: "#fff", // 环境光的颜色。[ default: #fff ]
                            intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                        },
                    },

                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        distance: 160, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 30, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: -3, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                }]
            });
            chart.off('click');
            chart.on("click", (e) => {
                console.log(e)
                self.mapXzData = []
                if (self.qssrpmList.length > 0) {
                    let swjgdm = ''
                    for (let i = 0; i < self.qssrpmList.length; i++) {
                        if (e.data.name == self.qssrpmList[i].SWJGMC) {
                            swjgdm = self.qssrpmList[i].SWJGDM
                        }
                    }
                    let param = {
                         swjgDm: swjgdm,
                        nd: self.form.nd,
                        jtlx: self.form.jtlx,
                    }
                    self.maploading = true
                    self.mapNsrmc = e.data.name
                    jsjfgkSwjgxz(param).then(res => {
                        self.maploading = false
                        if (res.code == 200) {
                            console.log(res)
                            self.mapXzData = res.data
                        }
                    })
                    console.log(swjgdm)
                    let dialog = document.getElementById('map-dialog')
                    dialog.style.display = 'flex'
                }
            })

        },
        qssr() {
            // qssrData
            let yAxisData = []
            let seriesData = []
            this.qssrpmList.forEach(item => {
                yAxisData.push(item.SWJGMC)
                seriesData.push(item.SE)
            })
            let myChart = echarts.init(document.getElementById('echart5'));
            myChart.setOption({
                /*
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                */
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '0%',
                    left: '29%',
                    right: '35%',
                    bottom: '0%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0.9, 0.04],
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线  
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: false // 
                    }
                },
                yAxis: {
                    // name: '单位：亿元',
                    // nameTextStyle: {
                    //   padding: [0, 0, 0, 780]
                    // },
                    type: 'category',
                    data: yAxisData,
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: true,
                        //interval: 40, //横轴信息全部显
                        //splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontWeight: "bold",
                            fontSize: 16,
                            align: 'right',
                            padding: [0, 0, 0, 0]
                        }
                    }
                },
                series: [{
                    name: '数值',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 16, // 条形的宽度  

                    label: {
                        show: true,
                        position: 'right',
                        fontSize: 16,
                        color: "#fff",
                        padding: 10
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                            offset: 0,
                            color: '#72DEFF'
                        },
                        {
                            offset: 1,
                            color: '#0C68FC'
                        }
                        ]),
                        borderRadius: [0, 10, 10, 0],
                    },
                    cursor: "default",
                    data: seriesData
                }],
            });

        },
        go(name) {
            this.$router.push(name)
        },

    }
}
</script>


<style lang="scss" scoped>
@import '~@/assets/styles/css/common.css';
@import '~@/assets/styles/css/index.css';
@import '~@/assets/styles/css/jquery-ui.css';

::v-deep {
    .el-range-input {
        color: #fff;
    }
    .el-input__inner {
        border: none;
        color: #fff;
        background: transparent;
    }

    .el-select-dropdown {
        background-color: #1f3680;
        border: 1px solid #1f92ff !important;
        border-radius: 3px;
    }

    // border: 1px solid #003eff;
    // background: #007fff;
    // font-weight: normal;
    .el-select-dropdown__item {
        color: #fff;
        &.selected {
            color: #003eff;
        }
        &.hover {
            background: #007fff;
        }
    }

    .el-picker-panel {
        background-color: #1f3680;
    }
    .el-month-table td.in-range div,
    .el-month-table td.in-range div:hover {
        background-color: #007fff;
        color: #fff;
    }
    //     .el-month-table td.end-date div, .el-month-table td.start-date div {
    //       color:#007fff;
    // }
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
        background-color: #007fff;
        color: #fff;
    }
    .el-date-table th,
    .el-picker-panel__icon-btn {
        color: #fff;
    }
    .el-date-table td.today span {
        color: #003eff;
    }
    .el-month-table td .cell {
        color: #fff;
    }
    .el-month-table td.today .cell {
        color: #003eff;
    }
    .el-date-range-picker__header div {
        color: #fff;
    }
    .el-popper[x-placement^='bottom'] .popper__arrow {
        border-bottom-color: #1f3680;
        &::after {
            border-bottom-color: #1f3680;
        }
    }
}
</style>